<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      >
<head th:replace="fragments/tabhead::headc"></head>

<body>

<th:block layout:fragment="content">
<!-- 销售订单 -->
<div style="margin-top:20px">
  <form class="layui-form" id="searchForm">
  <div class="layui-form-item">
     <div class="layui-inline">
      <label class="layui-form-label" style="width:100px">所属公司</label>
      <div class="layui-input-inline">
        <select name="companyId"><option value="1">深圳企智达有限公司</option></select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width:60px">客户</label>
       <div class="layui-input-block" style="width:200px;">
      		<select style="width:200px;height:58px;" name="customerId" lay-verify="required" required lay-ignore>
      		</select>
       </div>
<!--       <div class="layui-input-inline" style="width:100px">
        <input type="tel" name="customerName" class="layui-input"/>
      </div> -->
    </div>
   <div class="layui-inline">
      <label class="layui-form-label" style="width:100px">审核状态</label>
      <div class="layui-input-inline" style="width:100px;">
        <select name="reviewStatus">
        	<option th:each="s : ${status}" th:attr="value=${s.code}" th:text="${s.value}"></option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width:100px">单据日期</label>
      <div class="layui-input-inline" style="width:100px">
        <input type="text" id="startDate" class="layui-input" name='startDate'/>
      </div>
       <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width:100px">
        <input type="text" id="endDate" class="layui-input" name="endDate"/>
      </div>
    </div>
	
    <div class="layui-inline">
      <div class="layui-input-inline">
        <button class="layui-btn" id="searchBtn" type="button">查询</button>
      </div>
    </div>
    
  </div>
 </form>
</div>

<table class="layui-table"  id="tab" lay-filter="tab"></table>
<script>
var ins,page,trobj,editdialogindex;
$(function(){ 
	
	layui.use('form', function(){
		$("[name='customerId']").select2({
			  placeholder:"请选择供应商",//placeholder
			  language: 'zh-CN',//中文语言
			  allowClear:true,//出现删除按钮图片，可以清除下拉选中内容
			  ajax: {
				    url: "/com/suppliercustomer/supplierList",
				    dataType: 'json',
				    delay: 350,
				    data: function (params) {
				      console.log(params.page)
				      return {
				        name: params.term, // search term
				        companyid:1,
				        page: params.page,
				        limit:30
				      };
				    },
				    processResults: function (data, params) {
				      params.page = params.page || 1;
				      console.log(JSON.stringify(data))
				      return {
				        results: data.data,
				        pagination: {
				          more: (params.page * 30) < data.count
				        }
				      };
				    },
				    cache: true
			  },
			  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
			  minimumInputLength: 2,//最小输入字符，输入最小字符后开始后台请求
			  templateResult: formatRepo, // 处理远程返回数据
			  templateSelection: formatRepoSelection // 设置下拉选中后显示内容
		});
	});
  	function formatRepo (repo) {
  		//下拉展示内容可以修改自定义样式
      if (repo.loading) return repo.text;
      var markup = "<div class=\"layui-row\">" +
		      "<div class=\"layui-col-xs4 layui-col-sm4 layui-col-md3\">" +
		      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.no+"</div>" +
		     "</div>"+
		     "<div class=\"layui-col-xs8 layui-col-sm8 layui-col-md9\">" +
		      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.name+"</div>" +
		     "</div>";

      return markup;
    }

    function formatRepoSelection (repo) {
      return repo.name;//选中返回select中的值
    }		  
		  
	layui.use(['table','layer'], function(){
		var table = layui.table;
		ins =table.render({ //其它参数在此省略
		 elem:"#tab",
		 //url: '/sale/saleorder/list',
		 cols:[[
			  {field:'id',width:80, sort: true,title:'ID'},
			  /* {field : 'companyId',width:0,title : '所属公司id',hidden:true}, */
			  {field : 'companyName',width:180,title : '所属公司'},
			  {field : 'billNo',width:180,title : '销售订单编号'},
			  {field : 'sourceBillNo',width:180,title : '来源单据编号'},
			  /* {field : 'customerId',width:180,title : '客户Id'}, */
			  {field : 'customerName',width:180,title : '客户名称'},
			  /* {field : 'customerContact_id',width:180,title : '客户联系人id'}, */
			  {field : 'customerContactName',width:180,title : '客户联系人'},
			  {field : 'customerPhone',width:180,title : '联系电话'},
			  {field : 'customerAadr',width:180,title : '收货地址'},
			  {field : 'statementType',width:180,title : '结算方式'},
			  {field : 'statementDays',width:180,title : '结算周期'},
			  {field : 'orderAccount',width:180,title : '订单总量'},
			  {field : 'deliveredQuantity',width:180,title : '已交付数量'},
			  {field : 'undeliveredQuantity',width:180,title : '未交付数量'},
			  {field : 'origDiscountAmount',width:180,title : '订单未税总金额'},
			  {field : 'origTaxAmount',width:180,title : '订单含税总金额'},
			  {field : 'reviewStatus',width:180,title : '审核状态'},
			  /* {field : 'reviewId',width:180,title : '审核人Id'}, */
			  {field : 'reviewName',width:180,title : '审核人'},
			  {field : 'reviewTime',width:180,title : '审核时间'},
			  /* {field : 'modifyId',width:180,title : '修改人id'}, */
			  {field : 'modifyName',width:180,title : '修改人'},
			  {field : 'modifyTime',width:180,title : '修改时间'},
			  /* {field : 'creatorId',width:180,title : '创建人Id'}, */
			  {field : 'creatorName',width:180,title : '创建人'},
			  {field : 'ctime',width:180,title : '创建时间'},
			  {field : 'remark',width:180,title : '备注'},
		      {align:'center',fixed:'right',width:235, toolbar:'#toolbar',title:'操作'}
		 ]]
	    ,page: true //是否显示分页
	    ,limits: [10,20,50]
	    ,limit:10 //每页默认显示的数量
		  //where:{phone:phone}
		  //method: 'post'
		 ,done:function(res,curr,count){
			 console.log(res);
			 page = curr;
			    //得到当前页码
			    console.log(curr); 
			    
			    //得到数据总量
			    console.log(count);
		 }
		});
		
		table.on("tool(tab)",function(obj){
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值
			trobj = obj;
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			var id = data.id;
			var companyId=data.companyId;
			if(layEvent=='edit'){
				window.location.href="/stock/outbound/saleSave?id="+data.id;
			}
		});
		
		$("#searchBtn").click(function(){
			var phone = $("input[name='phone']").val();
			var table = layui.table;
		    ins.reload({url: '/sale/saleorder/list',where:$("#searchForm").serializeJson()})
		});
	})
	
	layui.use("laydate",function(){
		var laydate = layui.laydate;
		laydate.render({
			  elem: '#startDate' //指定元素
			});
		laydate.render({
			  elem: '#endDate' //指定元素
			});
	});
	
	

}); 
</script>
<script type="text/html" id="toolbar">
  	<a class="layui-btn layui-btn-mini" lay-event="edit">确选</a>
</script>
<!--<div th:replace="/department/model::modelDiv"></div>-->
</th:block>
</body>
</html>